<!--
 * @Author: zhangweinan
 * @Date: 2023-07-17 21:17:12
 * @LastEditors: Hzt
 * @LastEditTime: 2024-09-09 19:59:13
 * @Description: file content
 * @FilePath: \cty_admin\src\views\dataAnalysis\index.vue
-->
<template>
  <div class="chart-container">
    <div class="timer">
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        @change="onchangeTime"
      >
      </el-date-picker>
      <span class="tip">最长时间30天</span>
    </div>
    <chart
      v-if="flag"
      height="80%"
      width="100%"
      :xdata="xdata"
      :profit="profit"
      :avg-profit="avgProfit"
      :total-profit="totalProfit"
    />
  </div>
</template>

<script>
import Chart from "@/components/Charts/MixChart";
import { getDailyReportLine } from "@/api/dataAnalysis";

export default {
  name: "MixChart",
  components: { Chart },
  data() {
    return {
      profit: [],
      totalProfit: [],
      avgProfit: [], //平均收益
      xdata: [],
      flag: true,
      value1: "",
      pickerMinDate: null,
      pickerMaxDate: null,
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          console.log(maxDate);
          if (minDate && this.pickerMinDate) {
            this.pickerMinDate = null;
          } else if (minDate) {
            this.pickerMinDate = minDate.getTime();
          }
        },
        disabledDate: (time) => {
          if (this.pickerMinDate) {
            const day1 = 30 * 24 * 3600 * 1000;
            let maxTime = this.pickerMinDate + day1;
            let minTime = this.pickerMinDate - day1;
            return (
              time.getTime() > maxTime ||
              time.getTime() < minTime ||
              time.getTime() > Date.now()
            );
          } else {
            return time.getTime() > Date.now();
          }
        },
      },
    };
  },
  created() {
    //获取分析数据
    this.getData();
  },
  methods: {
    getData() {
      this.flag = false;
      getDailyReportLine({
        startDay: this.startDay,
        endDay: this.endDay,
      }).then((res) => {
        let { profit, totalProfit, xdata, avgProfit } = res.data;
        this.profit = profit || [];
        this.totalProfit = totalProfit || [];
        this.xdata = xdata || [];
        this.avgProfit = avgProfit || [];
        this.flag = true;
      });
    },
    onchangeTime(param) {
      this.startDay = this.parseTime(param[0]);
      this.endDay = this.parseTime(param[1]);
      this.getData();
    },
  },
};
</script>

<style scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 100px);
}
.timer {
  padding: 20px;
}
.tip {
  margin-left: 20px;
}
</style>
